<template>
    <div class="MyMessage">
        <el-button type="primary" onclick="javascript:history.go(-1)">返回</el-button>
        <div class="MyMessageCon" v-if="userMessage!=null && MyMessageContext !== null">
            <div class="MyMessageConImg">
                <input type="file" @change="getFile($event)" />
                <img :src="SrcImg" v-if="SrcImg!='null'&&SrcImg!='undefined'" ref="Hicon" id="MyMessagePortrait" />
            </div>
            <el-form ref="MyMessageContext">
                <el-form-item label="账号" label-width="60px">
                    <el-input :disabled="disabled" v-model="userMessage.userName" />
                </el-form-item>
                <el-form-item label="密码" label-width="60px">
                    <el-input :disabled="disabled" v-model="userMessage.userPass" />
                </el-form-item>
                <el-form-item label="名字" label-width="60px">
                    <el-input v-model="MyMessageContext.name" />
                </el-form-item>     
                <el-form-item label="电话" label-width="60px">
                    <el-input v-model="MyMessageContext.iphone" />
                </el-form-item>      
                <el-form-item label="vip" label-width="60px">
                    <el-radio-group :disabled="disabled" v-model="MyMessageContext.isVip">
                        <el-radio label="1" value="1">是</el-radio>
                        <el-radio label="0" value="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="地址" label-width="60px">
                    <el-input @focus="selectArea" v-model="MyMessageContext.address" />
                </el-form-item>
                <el-form-item label="性别" label-width="60px">
                    <el-radio-group v-model="MyMessageContext.sex">
                        <el-radio label="1" value="1">女</el-radio>
                        <el-radio label="0" value="0">男</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="userMessage.Identify != 2" label-width="60px" label="部门">
                    <el-select
                        v-model="userMessage.deptId"
                        filterable
                        @input="SelectDept"
                        @focus="focusDept()"
                        @blur="blurDept()"
                        @change="changeDept($event)"
                        placeholder="请选择部门">
                        <el-option
                            v-for="(item,index) in departs"
                            :key="index"
                            :label="item.name"
                            :value="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" label-width="60px">
                    <el-radio-group :disabled="disabled" v-model="userMessage.Identify">
                        <el-radio v-for="(item,index) in rolesList" :key="index" :label="item.id" :value="item.id">{{ item.topic }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="时间" label-width="60px">
                    <el-date-picker
                        disabled
                        v-model="userMessage.createTime"
                        type="date"
                        placeholder="Pick a Date"
                        format="YYYY-MM-DD"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">修改</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div v-else>
            <el-skeleton style="width: 100%;display: flex;align-items: end;">
                <template #template>
                    <div style="float: left;width: 50%;padding-right: 10px;">
                        <el-skeleton-item variant="p" style="width: 100%;padding: 10px 0 4px 0;" />
                        <el-skeleton-item variant="p" style="width: 100%;padding: 10px 0 4px 0;" />
                        <el-skeleton-item variant="p" style="width: 100%;padding: 10px 0 4px 0;" />
                        <el-skeleton-item variant="p" style="width: 100%;padding: 10px 0 4px 0;" />
                        <el-skeleton-item variant="p" style="width: 100%;padding: 10px 0 4px 0;" />
                        <el-skeleton-item variant="p" style="width: 100%;padding: 10px 0 4px 0;" />
                    </div>
                    <el-skeleton-item variant="image" style="width: 33%;height: 400px;" />
                </template>
            </el-skeleton>
        </div>
        <el-dialog
            v-model="dialogVisible"
            title="选择地点"
            width="30%"
            height="300px"
        >
           <div class="map">
                <Map @addr="Getaddr($event)" :Area="dialogVisible"></Map>
           </div>
        </el-dialog>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { ElMessage  } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 
import roles from '@/util/roles'
import Map from './map'
export default defineComponent({
    components:{
        Map
    },
    data(){
        return{
            MyMessageContext:{
                "id":0,
                "name":'',
                "hicon":null,
                "isVip":'0',
                "iphone":'',
                "sex":'0',
                "address":'',
                "lal":'',
                "uid":0
            },
            departs:[],
            departText:'',
            userMessage:null,
            disabled:true,
            rolesList:[],
            RootbaseUrl:'',
            SrcImg:null,
            dialogVisible:false
        }
    },
    created () {
        if(this.store.state.basicUser==null){
            ElMessage({
                message: '当前未登陆',
                type: 'error',
            })
            return;
        }
        this.rolesList = roles;
        this.userMessage = this.store.state.basicUser;
        // self.userMessage.deptId = Number(self.userMessage.deptId);
        this.disabled = !this.store.state.basicManage;
        this.RootbaseUrl = "empinfo"
        if(this.userMessage.Identify == "2"){
            this.RootbaseUrl = "login"
        }
        this.SelectDept(-1);
        this.LoadData()
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    methods:{
        LoadData(){
            let self = this;
            self.$http.get(`${self.baseUrl}/user/selectUid?id=${self.userMessage.Id}`,).then(res=>{
                if(res.data){
                    self.MyMessageContext = res.data;
                    self.SrcImg = `${res.data.hiconBase64}`;
                }else{
                    ElMessage({
                        message: '无数据',
                        type: 'error',
                    })
                }
            })
        },
        selectArea(){
            this.dialogVisible = true;
        },
        SelectDept(loadstate){
            let self = this;
            let row = {
                name:loadstate==-1?null:self.userMessage.deptId
            };
            self.$http.post(`${self.baseUrl}/deptinfo/selectName`,row).then(res=>{
                let {document} = res.data;
                self.departs = document;
                
            })
        },
        focusDept(){
            this.departText = this.userMessage.deptId;
            this.userMessage.deptId = -1;
        },
        blurDept(){
            this.userMessage.deptId = this.departText;
        },
        changeDept(msg){
            this.departText = msg;
            this.userMessage.deptId = msg;
        },
        Getaddr(msg){
            let { lng,lat} = msg.point;
            this.MyMessageContext.address = `${msg.address}-${msg.title}`;
            this.MyMessageContext.lal = `[${lng},${lat}]`;
        },
        onSubmit(){
            this.updataUser();
            this.updataLogin();
        },
        updataLogin(){
            let self = this;
            self.$http.post(`${self.baseUrl}/${self.RootbaseUrl}/updateLogin`,this.userMessage).then(res=>{})
        },
        updataUser(){
            let self = this;
            if(this.userMessage==null) return;
            let fromdata = new FormData();
            fromdata.append("Name",this.MyMessageContext.name);
            if(this.MyMessageContext.hicon!=null) fromdata.append("HIcon",this.MyMessageContext.hicon);
            if(this.MyMessageContext.isVip!=null) fromdata.append("isVip",this.MyMessageContext.isVip);
            if(this.MyMessageContext.iphone!=null) fromdata.append("iphone",this.MyMessageContext.iphone);
            if(this.MyMessageContext.sex!=undefined) fromdata.append("Sex",this.MyMessageContext.sex);
            if(this.MyMessageContext.address!=undefined) fromdata.append("Address",this.MyMessageContext.address);
            if(this.MyMessageContext.lal!=undefined) fromdata.append("LAL",this.MyMessageContext.lal);
            fromdata.append("uid",this.userMessage.Id);
            self.$http.post(`${self.baseUrl}/user/AddPetUserMessage`,fromdata,{
                headers: { 
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res=>{
                if(res.data==1){
                    ElMessage({
                        message: '修改成功,请重新登录以生效',
                        type: 'success'
                    })
                    self.getUserinfo();
                }
            })
        },
        getUserinfo(){
            let self = this;
            self.$http.get(`${self.baseUrl}/${self.RootbaseUrl}/selectId?id=${self.userMessage.Id}`).then(res=>{
                let u = res.data;
                self.$http.get(`${self.baseUrl}/user/selectUid?id=${u.Id}`).then(r=>{
                    let d = Object.assign(u,r.data);
                    self.userMessage = d;
                    self.store.dispatch("asyncStoreUser",d);
                })
            })
        },
        getFile(msg){
            let self = this;
            let file = msg.target.files[0];
            self.MyMessageContext.hicon = file;
            const reader = new FileReader();
            reader.onload = function(e){
                self.SrcImg = e.target.result;
            }
            reader.readAsDataURL(file);
        },
        initial(){
            return{
                "id":0,
                "name":'',
                "hicon":null,
                "iphone":'',
                "isVip":'0',
                "sex":'0',
                "address":'',
                "lal":'',
                "uid":0
            }
        }
    }
})
</script>
<style scoped>
    .MyMessageCon{
        margin-top: 46px;
    }
    .MyMessageConImg{
        width: 30%;
        float: right;
        margin: 0 74px 20px 20px;
        min-height: 300px;
        position: relative;
        background-repeat: round;
        background-image: url(http://localhost:3002/img/portrait.c10fad40.jpg);
        border-radius: 10px;
        background-size: 300px 300px;
        border: 1px dashed #ccc;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .MyMessageConImg input{
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
    }
    #MyMessagePortrait{
        width: 99%;
        height: 100%;
        border-radius: 10px;
        padding: 2px 2px;
    }
    .MyMessageOperate{
        margin: 20px;
    }
    .MyMessageForm{
        width: 66%;
    }
    .map{
        width: 100%;
        height: 300px;
    }
</style>